[前端暴龍機，Vue2.x 進化 Vue3 ] Day5. Vue的起手開發

13th鐵人賽 vue.js vue helloworld

gior__ann

團隊請付費解鎖團隊名稱

2021-09-14 09:18:27

1167 瀏覽

分享至

接下來，開始看看如何著手進行 Vue 的開發吧
這邊都是透過最原始、最簡單的網頁開發模式進行，所以不會介紹到 Cli 的方式~

Hello Vue ，第一個 Vue 網頁開發

還記得~ 不管是 Java、Python、C ...每次學習一個新的語言，第一個學會的範例就是跟它 say hello
所以我們也來一個 Hello Vue 吧~

1.引入 Vue 資源

我們要使用別人的功能，第一件做的事就是把資源給引入進來，才可以使用
所以我們可以透過官網，將 Vue 的 CDN 給貼到 html 中

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.建立 Vue 實例

每一個 Vue 的應用都是透過 new Vue({}) 的方式來創建實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <script>
        var vm = new Vue({})
    </script>
</body>
</html>

所以 vm 就會是我們的一個 Vue 的應用

3.Vue 可作用的空間

Vue 的實例已經宣告完畢，接著我們必需告訴它哪裡的範圍是 Vue 可以提供服務的，透過的是 el 去指定。
假設 : 我們要使用 Vue 提供服務的區塊為在 id 為 app 的 div 區塊，所以如果不是在 app 區塊裡面的就沒有 vue 的功能了。

<body>
    // 在這裡就無法使用 Vue 所提供的服務
    <div id="app">
        // 在此區塊才可以使用 Vue 所提供的服務
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
        })
    </script>
</body>

如圖，沒有在 el 定義的可作用的空間內，就會被當成存文字顯示

4.數據與方法

接著，Vue 提供了兩個分別管理數據(data)和方法(methods)的區塊來集中管理，只要在 data 裡所有宣告的變數有渲染到畫面上，那麼如果變數的值發生變更，畫面就會產生"響應"，即把更新後的值重新渲染到畫面上

<script>
    var vm = new Vue({
        el: '#app',
        data:{
            // 宣告變數的地方
        },
        methods:{
            // 做事件處理的地方
        }
    })
</script>

5.將數據渲染到畫面上(聲明式渲染)

聲明式渲染是一個模板語法，可以將數據渲染到 DOM ，透過 {{ 變數 }} 表示，由雙花括號 {{ }} 所包住，就可在 DOM 上渲染出變數的值了，又稱做插值表示式。

<div id="app">
    {{ msg }}
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data:{
            msg: 'Hello Vue'
        },
        methods:{
      
        }
    })
</script>